<template>
	<view>

		<view v-if="coverResultPreview == false && showPoster == false">
			<scroll-view class="cover-list" scroll-x="true" @scrolltolower="getMoreHandler">
				<view class="cover-item" v-for="item in coverList" :key="item.id" @click="coverClick(item)">
					<image style="width: 100%;height: 100%" :src="item.image"></image>
				</view>
				<view v-if="coverLoading" class="cover-loading" style="position: relative;">
					<view style="position: absolute;top: 0;left: 0;width: 100%;height: 400px;display: flex; align-items: center;justify-content: center;">
						<view v-if="coverLoading == 'load'" style="writing-mode: tb-rl;">加载中...</view>
						<view v-if="coverLoading == 'nomore'" style="writing-mode: tb-rl;">没有更多了...</view>
					</view>
				</view>
			</scroll-view>
			<view style="padding: 20rpx;text-align: center;font-weight: 600;font-size: 12pt">左右滑动切换选择心仪的海报。点击海报进行打卡签到</view>
		</view>
		<view class="cover" v-if="coverResultPreview">
			<view style="position: relative;width: 360px;height: 600px;" id="coverCanvas">
				<img style="width: 360px;height: 600px;" :src="coverUrl"></img>
				
				<!-- 头像 -->
				<view v-if="defPos.head.is_show == 1" class="user-avatar"
					:style="{
						position: 'absolute',
						width:defPos.head.size + 'px',
						height:defPos.head.size + 'px',
						top: defPos.head.top + 'px',
						left: defPos.head.left + 'px'}">
					<img :src="userAvatar" style="width: 100%;height: 100%"></img>
				</view>
				
				<!-- 昵称 -->
				<view v-if="defPos.name.is_show == 1">
					<text v-if="defPos.name.center == 1"
						:style="{
							position: 'absolute',
							top: defPos.name.top + 'px',
							left: defPos.name.left + 'px',
							fontSize: defPos.name.font + 'px',
							color: defPos.name.color}">
						{{userName}}
					</text>
					<text v-else-if="defPos.name.center == 2"
						:style="{
							position: 'absolute',
							top: defPos.name.top + 'px',
							fontSize: defPos.name.font + 'px',
							color: defPos.name.color,
							textAlign: 'center',
							display: 'block',
							width: '100%'}">
						{{userName}}
					</text>
				</view>
				
				
				<view class="cover-qrcode" v-if="defPos.qr_code.is_show == 1" :style="{
						position: 'absolute',
						width:defPos.qr_code.size + 'px',
						height:defPos.qr_code.size + 'px',
						top: defPos.qr_code.top + 'px',
						left: defPos.qr_code.left + 'px',
						borderRadius: defPos.qr_code.type == 1 ? '50%' : '0%'
					}">
					<img :src="codeUrl" style="width: 100%;height: 100%"></img>
				</view>
			</view>
		</view>

		<view v-if="showPoster" style="width: 100vw;position: fixed;top: 0;left: 0;z-index: 999;">
			<img style="width: 100%;height: 100%" :src="poster_url"></img>
			
			<view style="position: fixed;width: 100vw;bottom: 0;padding-bottom: 30rpx;">
				<view style="margin: 20rpx 0;text-align: center;font-weight: 600;font-size: 12pt;">长按图片可保存至手机</view>
				<u-button style="width: 300rpx;" type="warning" @click="toIndex">返回</u-button>
			</view>
		</view>
		
	</view>
</template>

<script>
	import QRCode from 'qrcode';
	//#ifdef H5
	import html2canvas from 'html2canvas'
	//#endif
	export default{
		data(){
			return {
				coverList:[],
				pagination:'',
				coverLoading:false,
				
				
				coverResultPreview:false,
				coverUrl:"",
				codeUrl:'',
				userAvatar:'',
				userName:'',
				defPos:"",
				poster_url:'',
				showPoster:false
			}
		},
		onLoad(){
			this.initData();
			this.getCoverList();
			// let self = this;
			// setTimeout(function(){
			// 	self.generateQRCode("123123123")
			// },3000)
		},
		methods:{
			async getCoverList(){
				let res = await this.$http.request({
					url:this.$api.plugin.sign.coverList,
					method:"get",
					data:{page:this.pagination.current_page ?? 1}
				});
				if(res.code == 0){
					this.coverList.push(...res.data.list);
					this.pagination = res.data.pagination
				}else{
					this.$http.toast(res.msg);
				}
			},
			initData(){
				this.coverList = [];
				this.pagination = '';
			},
			
			getMoreHandler(){
				if(this.pagination.current_page >= this.pagination.page_count){
					this.coverLoading = 'nomore'
					return false;
				}
				this.coverLoading = 'load';
				this.pagination.current_page++;
				this.getCoverList();
			},
			
			
			async generateQRCode(url) {
				const options = {
					width: 300,  // 二维码的宽度
					height: 300, // 二维码的高度
				};
				let qrcode =  await QRCode.toDataURL(url,options);
			    console.log(qrcode)
			},
			
			async coverClick(cover){
				let self = this;
				uni.showLoading({mask:true,title:'请稍后~'})
				let userInfo = uni.getStorageSync("userInfo") ? JSON.parse(uni.getStorageSync("userInfo")) : '';
				this.userAvatar = userInfo.avatar;
				this.userName = userInfo.nickname;
				this.defPos = JSON.parse(cover.extend);
				this.coverUrl = cover.image;
				const options = {
					width: 300,  // 二维码的宽度
					height: 300, // 二维码的高度
				};
				let url = cover.link.indexOf('?')  !== -1 ? cover.link+"&pid=" + userInfo.pid : cover.link+"?pid=" + userInfo.pid;
				this.codeUrl =  await QRCode.toDataURL(url,options);
				self.coverResultPreview = true;
				
				setTimeout(async ()=>{
					window.pageYoffset = 0;
					document.documentElement.scrollTop = 0;
					document.body.scrollTop = 0;
					let canvas = await html2canvas(
					    document.getElementById('coverCanvas'), 
					    { 
							width: document.getElementById('coverCanvas').clientWidth,
							height: document.getElementById('coverCanvas').clientHeight,
							scale:3,
							dpi: window.devicePixelRatio * 3,
							useCORS: true,
						 }
					);
					
					self.poster_url = canvas.toDataURL('image/png', 1);
					
					let res = await self.$http.request({
						url: self.$api.plugin.sign.user_sign_in,
						method: 'post',
						showLoading:true,
						data:{cover_id:cover.id}
					});
					if(res.code === 0){
						self.$http.toast("恭喜您今日签到成功~");
					}
					uni.hideLoading();
					
					if(self.poster_url.length>0){
						self.showPoster=true;
						self.coverResultPreview = false;
					}
				},1500)
				
				
			},
			
			toIndex(){
				uni.navigateTo({
					url:'/pages/user/index'
				})
			}

		}
	}
</script>

<style lang="scss">
	.cover-list{
		width: 98vw;
		height: 600px;
		margin: 20rpx auto;
		white-space: nowrap;
		background-color: #c2c2c2;
	}
	.cover-item{
		width: 360px;
		height: 600px;
		display: inline-block;
		margin-right: 10rpx;
	}
	.cover-loading{
		width: 100px;
		height: 500px;
		display: inline-block;
	}
	
	
	/deep/ ::-webkit-scrollbar {
		 //滚动条整体样式
		    display: block;
		    width: 10px !important;
		    height: 10px !important;
		    -webkit-appearance: auto!important;
		    background: #f2f2f2;
		    overflow: auto!important;
	}
	/deep/ ::-webkit-scrollbar-thumb {
		 //滚动条里面小方块
		   border-radius: 10px !important;
		   box-shadow: inset 0 0 5px rgba(0,0,0,0.2) !important;
		   background-color: #535353 !important;
	}
	/deep/ ::-webkit-scrollbar-track {
		   //滚动条
		   border-radius: 10px !important;
		   box-shadow: inset 0 0 5px rgba(0,0,0,0.2) !important;
		   background-color: #ededed !important;
	}
	
	
	
	

	.cover{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background: #fff;
		display: flex;
		justify-content: center;
		padding: 50rpx 0;
	}
	
	
	.user-avatar{
		border-radius: 50%;
		overflow: hidden;
	}
	.cover-qrcode{
		overflow: hidden;
	}
</style>